<!--田伟-->
<!DOCTYPE html>
<html lang="zh-CN"><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/new_file.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
    <title>21天习惯养成计划</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">

    <div class="container" >
        <div class="navbar-header">
            <button type="button" class="btn btn-default btn-sm">
                <!--<span class="glyphicon glyphicon-arrow-left">返回</span>-->
                返回
            </button>
            <img class="image1" src="img/21天习惯养成logo.png">
        </div>
        <ul class="nav navbar-nav">
           <h3>钱包</h3>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="item">
                <img src="img/qianbao.jpg" height="50px" />
            </li>
        </ul>
    </div>
</nav>
<div class="container" id="app">
    <div class="row">
        <div class="col-md-12">
            <div class="jumbotron">
                <h3>钱包余额:<span id="mon" style="color: black;">{{mon}}</span>￥</h3>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a name="mx">钱包明细</a>
                </div>
                <div class="panel-info"  style="height: 200px;">
                    <table class="table table-hover">
                        <tboby>
                            <tr class="active">
                                <th>账目变动时间</th>
                                <th>账目变动情况</th>
                                <th>项目名称</th>
                            </tr>
                            <tr>
                                <td>2018-8-8</td>
                                <td>支出5￥</td>
                                <td>每天写java代码活动</td>
                            </tr>
                            <tr>
                                <td>2018-8-21</td>
                                <td>收入5￥</td>
                                <td>养成早睡习惯活动</td>
                            </tr>

                        </tboby>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--<div class="active" style="color: red; font-family: '微软雅黑';"><a name="jp">免死金牌的个数：</a><span id="num" >{{jp}}</span></div>-->
    <script>
        var vue=new Vue({
            el: '#app',
            data:{
                mon: '5',
                jp: '1',
                hist:[]
            }
        })
    </script>
</body>
</html>
